<!DOCTYPE html>
<html>
<head>
<title>会员信息查询</title>
</head>
<body>
	<header>
			<p>
				<label>
					VIP(手机号):
					<select>
						<option>+86</option>
						<option>+10</option>
						<option>+11</option>
					</select>
					<input value="13888888888"  maxlength="11" name="mobile"  autofocus>
				</label>
				<button id="submitBtn" type="submit">Go</button>
			</p>
	</header>
	<section id="queryNoResultView" style="display:none">
		没有VIP(<b id="mobileInput"></b>)信息，请检查一下手机号是否正确。
	</section>
	
	<main id="queryHasResultView" style="display:none">
		
		<article>
			<p>
				<span>
					手机号:
					<b id="account"></b>
				</span>
				<span>
					VIP等级:
					<b id="rank"></b>
				</span>
				<span>
					目前消费总金额:
					￥<b id="totalConsumeMoney"></b>元
				</span>
			</p>
			<p>
				<span>
					姓名:
					<b id="name"></b>
				</span>
				<span>
					性别:
					<b id="sex"></b>
				</span>
				<span>
					生日:
					<b id="birthday"></b>
				</span>
			</p>
			<p>
				<span>
					QQ:
					<b id="qq"></b>
				</span>
				<span>
					Email:
					<b id="email"></b>
				</span>
				<span>
					邮寄地址/邮编:
					
					<b id="addressAndCode"></b>
				</span>
			</p>
			<p>
			<p>
		</article>
	
	<script src="/static/js/jquery.js"></script>
    <script src="/static/js/yi.toast.js"></script>
    <script>
     	
    	$("#submitBtn").click(function(evt){
    		
       		let mobile=$("input[name=mobile]").val().trim();
       		if(mobile.length===0){
       			toast("VIP手机号码必须输入");
       			return;
       		}
       		if(mobile.length<11){
       			toast("VIP手机号码不是合法的手机号");
       			return;
       		}
       		$("#submitBtn").prop("disabled",true);
    		$.get("/vip/load.do",{
    			mobile:mobile
    		},function(resp){
    			if(resp.code!=="ok"){
    				toast(resp.message);
    				return;
    			}
    			//成功绘制界面
    			paintQuerySuccessView(resp.data,mobile);
    			
    		}).always(function(){
    			$("#submitBtn").prop("disabled",false);
    		});
    		
    	});
    	
    	/**
    	*绘制查询成功界面
    	*/
    	const paintQuerySuccessView=function(data,input){
    		if(!data){
    			$("#queryNoResultView").show();
    			$("#queryHasResultView").hide();
    			$("#mobileInput").text(input);
    		}else{
    			$("#queryHasResultView").show();
    			$("#queryNoResultView").hide();
    			console.log(data);
    			$("#account").text(data.account);
    			$("#name").html(data.name);
    			$("#birthday").text(data.birthday);
    			$("#totalConsumeMoney").text(data.totalConsumeMoney);
    			$("#sex").text(data.sex?"男":"女");
    			let rank=data.rank;
    			$("#rank").text(rank.name);
    			$("#rank").attr("title",rank.remark)
    			
    		}
    		
    	};
    </script>
	</main>
	
</body>
</html>